<template>
    <div>
        <p style="font-size:30px;margin-bottom:30px;margin-top:10px;text-align: center;color:#E6A23C">子父组件之间相互通信</p>
        <child @listenToChildEvent="showMsgFromChild"></child>
        <div>
        <h3>parent组件部分:接受子组件的数据并呈现</h3>
        <div class="title">
            <span>序号</span>
            <span>数据</span>
        </div>
        <div v-for="(item,index) in parentMsg" :key="index">
            <span>{{ index+1 }}</span>
            <span style="margin-left:20px">{{ item }}</span>
        </div>
        </div>
    </div>
</template>
<script>
import child from '../subcomponents/member.vue'
export default {
        data(){
        return{
            parentMsg:[]
        }
    },   
    methods:{
         showMsgFromChild(data){
             if(data === null){
                alert('数据为空')
                return
             }
             this.parentMsg.push(data)
        }   
    },
    components:{
        child
    }

}
</script>

<style lang="sass" scoped>
</style>